<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <h1 id="hh"></h1>
</body>
</html>
<script>
    let data={
        name:'李白',
        age:30,
        hobby:['吃','喝','写代码']
    }
    // Object.defineProperty是vue响应式的原理
    Object.defineProperty(data,'name',{ //表示劫持的对象是data,劫持的属性是name 
        configurable:false, //configurable这个属性的作用是：如果值为true,那么说明被劫持的属性是可以被删除的
        enumerable:true,//这个属性控制当前被动持的属性是否可以枚举，啥是枚举?即元素是否可以被数出来
        // value:'小红',//此时李白变成了小红
        // writable:false,//这个属性控制被劫持的属性是否可以写入
        get(){
//控制当前的属性值
//只要属性被访问了，就会触发get函数
//访问对象属性的方式 obj.xx 和 obj ['xx' ]都会触发get 
            console.log('属性被访问了');
            return '李雷'
        },
        set(input){
            // 只要对劫持的属性赋值就会触发set
        console.log('属性被赋值了');
        console.log(input);
        document.getElementById('hh').innerText=input

        }
    })
    //删除一个属性
    delete data.name; //因为configurable为false，所以name是无法被删除的
    console.log(data);
    // 通过遍历的方式，枚举属性
    console.log(Object.keys(data)); //此时可以打印出data中所有的key,因为enumerable的状态为true，属于可枚举状态，但是当改为false就不能打印name这个key了

    data.name='小明' //更改name为小明，但是此时没有更改成功，因为writable的值为false，所以此时是不能更改成功的
    console.log(data);

</script>